<template>
  <div class="card-common-inner wise-man-business">
    <first-level-title title="业务拓展" />
    <sec-level-title title="实时发展" />
    <div class="business-real">
      <div class="real-item">
        <div class="title">截至今日</div>
        <div class="value">3456</div>
      </div>
      <div class="real-item">
        <div class="title">移网发展量</div>
        <div class="value">2341</div>
      </div>
      <div class="real-item">
        <div class="title">宽带发展量</div>
        <div class="value">4532</div>
      </div>
    </div>
    <sec-level-title title="昨日发展" />
    <div class="business-yesterday-info">
      <div class="business-yesterday-item">
        <div>移网</div>
        <div class="sub-title">当月累计/当月目标</div>
        <div class="value">166/0<span class="unit">户</span></div>
        <div class="percent-title">
          环比上月
          <span class="percent up">
            34.32%
            <img src="~@/assets/imgs/publicline/index/arrow_up.png" />
          </span>
        </div>
      </div>
      <div class="business-yesterday-item">
        <div>宽带</div>
        <div class="sub-title">当月累计/当月目标</div>
        <div class="value">166/0<span class="unit">户</span></div>
        <div class="percent-title">
          环比上月
          <span class="percent up">
            34.32%
            <img src="~@/assets/imgs/publicline/index/arrow_up.png" />
          </span>
        </div>
      </div>
      <div class="business-yesterday-item">
        <div>沃家神眼</div>
        <div class="sub-title">当月累计/当月目标</div>
        <div class="value">166/0<span class="unit">户</span></div>
        <div class="percent-title">
          环比上月
          <span class="percent down">
            -34.32%
            <img src="~@/assets/imgs/publicline/index/arrow_down.png" />
          </span>
        </div>
      </div>
      <div class="business-yesterday-item">
        <div>沃家固话</div>
        <div class="sub-title">当月累计/当月目标</div>
        <div class="value">166/0<span class="unit">户</span></div>
        <div class="percent-title">
          环比上月
          <span class="percent up">
            34.32%
            <img src="~@/assets/imgs/publicline/index/arrow_up.png" />
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import firstLevelTitle from '@/components/common/firstLevelTitle.vue'
import secLevelTitle from '@/components/common/secLevelTitle.vue'

export default {
  components: { firstLevelTitle, secLevelTitle },
}
</script>
<style lang="less" scoped>
@import '~@/assets/less/card.less';
.wise-man-business {
  .business-real {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    margin-top: 10px;
    .real-item {
      width: 33%;
      border-left: 1px solid rgba(245,245,245,1);
      &:first-child {
        border-left: none;
      }
    }
    .value {
      font-size: 24px;
      color: #4D98FF;
      margin-top: 4px;
    }
  }
  .business-yesterday-info {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    .business-yesterday-item {
      width: 45%;
      padding: 12px 0 8px 12px;
      background: #FFF;
      box-shadow: 0 2px 4px 1px #f3f7fa;
      border-radius: 3px;
      margin-bottom: 12px;
      .sub-title {
        font-size: 12px;
        color: #999;
        margin-top: 6px;
      }
      .value {
        font-size: 24px;
        color: #4D98FF;
        margin: 2px 0;
      }
      .unit {
        font-size: 14px;
      }
      .percent-title {
        font-size: 12px;
        color: #999;
        .percent {
          padding-left: 10px;
        }
        .up {
          color: #FF6024;
        }
        .down {
          color: #40BB3F;
        }
        img {
          width: 11px;
        }
      }
    }
  }
}
</style>
